<template>
	<section>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="姓名:">
				<el-input v-model="formInline.user" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="供应商:">
				<el-select v-model="formInline.region" placeholder="请选择">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="default">重置</el-button>
				<el-button type="text">展开</el-button>
			</el-form-item>
		</el-form>
		<el-col :span="24">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="index" :index="indexMethod">
				</el-table-column>
				<el-table-column prop="applier" label="供应商">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="idNo" label="身份证号">
				</el-table-column>
				<el-table-column prop="lianxi" label="联系方式">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="goto">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<el-col :span="24" class="paginations">
			<el-pagination layout="prev, pager, next" :total="500">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					user: '',
					region: ''
				},
				tableData: [{
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}, {
					applier: '上海互济实业有限公司',
					name: '昊天',
					idNo: '320698475987596874656',
					lianxi: '13698459875'
				}],
			}
		},
		methods: {
			// 查询
			onSubmit() {
				console.log('submit!');
			},

			// 表格索引
			indexMethod(index) {
				return index * 1;
			},
			
			goto(){
				this.$router.push({ path:'/driver_detail'})			
			}
		}
	}
</script>
<style>

</style>
